<template>
    <div class="main_content">
        <div class="content">
            <div class="search">
                <div class="list">
                    <span>关键字搜索:</span>
                    <Input v-model="keyword" placeholder="请输入关键字进行搜索" style="width:200px" maxlength="15" clearable/>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <span>状态:</span>
                    <Select v-model="state" filterable style="width:200px" placeholder="请选择状态" >
                        <Option v-for="item in stateList" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <input type="text" class="intBox" style="display:none" />
                <div class="list">
                    <el-button type="primary" @click="searchAll" size="small" plain>搜索</el-button>
                    <el-button type="primary" @click="clear" style="margin-left:20px;" size="small">重置</el-button>
                </div>
            </div>
            <el-button type="primary" @click="updateRow(0)" size="small" plain>+ 添加类型</el-button>
            <div class="table">
                <el-table :data="list" :height="tableHeight">
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column prop="type" label="类型图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.iconUrl" alt="" style="display:block;width:60px;height:60px;">
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template slot-scope="scope">
                        <div v-if="scope.row.state === 0">
                            <el-tag type="info" size="small">禁用</el-tag>
                        </div>
                        <div v-if="scope.row.state === 1">
                            <el-tag type="success" size="small">启用</el-tag>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-switch  :value="scope.row.state == 0 ? false: true" active-color="#13ce66" inactive-color="#999" @change="getFlag(scope.$index, list)" style="margin-right:5px;"></el-switch>
                            <el-button @click.native.prevent="updateRow(1,scope.$index, list)" type="text" size="small">编辑</el-button>
                            <el-button style="color:red" @click.native.prevent="removeRow(scope.$index, list)"  type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <Page v-if="totalCount" :current.sync="current" :total="totalCount" :page-size="10" show-elevator show-total @on-change="pageChange"></Page>
            </div>
        </div>

        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="classAddModal" :title="isAdd?'添加类别':'编辑类别'" width="500px" :mask-closable="false" >
            <div class="addClassModal">
                <div class="item">
                   <span class="tip" style="color:red;">*</span>
                   <span>算法类型名称 ：</span>
                   <div class="inputbox">
                       <el-input   placeholder="请输入"  v-model="name"></el-input>
                   </div>
                </div>

                <div class="item" style="justify-content:flex-start" >
                    <span class="tip" style="color:red;">*</span>
                    <span>算法类型编码 ：</span>
                    <div class="inputbox">
                        <el-input   placeholder="请输入"  v-model="typeNumber"></el-input>
                    </div>
                </div>

                <div class="item">
                   <span class="tip" style="color:red;">*</span>
                   <span>算法类型图片 ：</span>
                   <div class="inputbox">
                       <el-upload class="upload-demo" drag :headers="headers" :action="$axios.defaults.baseURL+'/ms/api/sys/algorithm/uploadImg'" :show-file-list="false" :on-success="iconUrlSuccess" :before-upload="beforeAvatarUpload" name="file">
                            <img v-if="iconUrl" :src="iconUrl" class="avatar myItem" />
                            <div class="el-upload__text">点击添加算法图片</div>
                        </el-upload>
                   </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>
import {
    getAlgorithmList,
    getAlgorithmUploadImg,
    getAlgorithmAdd,
    getAlgorithmEdit,
    getAlgorithmDel,
    getAlgorithmState
} from "@/api/api.js";
export default {
    data() {
        return {
            id:'',
            totalCount: "",
            current: 1,
            pageNum: 1,
            pageSize: 10,
            keyword: "",
            name:"",
            iconUrl:"",
            typeNumber:"",
            stateList:[
                {
                    id:0,
                    name:"禁用"
                },
                {
                    id:1,
                    name:"启用"
                }
            ],
            state:"",
            list:[],
            algId:"",
            deptId:"",
            isAdd:true,
            deleteModal:false,
            classAddModal:false,
            headers: {
                Authorization:localStorage.getItem('COOKIE'),
            },
            tableHeight: window.innerHeight - 315,
        };
    },
    methods: {
        iconUrlSuccess(res, file) {
            this.iconUrl = res.data;
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$Message.error("上传图片大小不能超过 2MB!");
            }
            return ;
        },
        getList() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                keyword: this.keyword,
                state:this.state,
            };
            getAlgorithmList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        pageChange(index) {
            this.pageNum = index;
            this.getList();
        },
        searchAll() {
            this.pageNum = 1;
            this.current = 1;
            this.getList();
        },
        clear() {
            this.keyword = "";
            this.state ="";
            this.getList();
        },
        getFlag(index,rows) {
            let id = rows[index].id;
            let state = rows[index].state;
            let params = id+'/'+state
            getAlgorithmState(params).then(res=>{
                if (res.code == 200) {
                    this.$Message.success("操作成功");
                    this.getList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        updateRow(type,index,rows){
            this.id = "";
            this.iconUrl = "";
            this.name = "";
            this.typeNumber = "";
            if(type==0){
                this.classAddModal = true;
                this.isAdd = true;
            }else{
                this.id = rows[index].id;
                this.name = rows[index].name;
                this.iconUrl = rows[index].iconUrl;
                this.typeNumber = rows[index].type;
                this.isAdd = false;
                this.classAddModal = true;
            }

        },
        submitAll(){
            let name = this.name;
            let iconUrl = this.iconUrl;
            let type = this.typeNumber;
            if(this.name==""||!this.name){
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写算法类型名称"
                });
                return;
            }
            if(this.typeNumber===''){
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写算法编码"
                });
                return;
            }else{
                let reg =  /^[0-9]*$/;
                if(!reg.test(this.typeNumber)){
                    this.$Modal.warning({
                        title: "提示",
                        content: "格式错误"
                    });
                    return;
                }
            }

            if(this.iconUrl==""||!this.iconUrl){
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请上传算法图片"
                });
                return;
            }

            if(this.isAdd){
                let params = {
                    name,
                    iconUrl,
                    type,
                }
                getAlgorithmAdd(params).then(res=>{
                    if (res.code == 200) {
                        this.$Message.success("添加成功");
                        this.getList();
                        this.classAddModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error=>{
                    console.log(error)
                })
            }else{
                let params = {
                    id:this.id,
                    name,
                    iconUrl,
                    type,
                }
                getAlgorithmEdit(params).then(res=>{
                    if (res.code == 200) {
                        this.$Message.success("修改成功");
                        this.getList();
                        this.classAddModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error=>{
                    console.log(error)
                })
            }
        },
        removeRow(index,rows) {
            this.algId = rows[index].id;
            this.deleteModal = true;
        },
        detele(){
            getAlgorithmDel(this.algId).then(res=>{
                if (res.code == 200) {
                    this.$Message.success("操作成功");
                    this.getList();
                    this.deleteModal = false;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        cancel(type) {
            if(type == 1) {
                this.classAddModal = false;
            } else if(type == 2) {
                this.deleteModal = false;
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getList();
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.pageNum = 1;
                this.current = 1;
                this.getList();
            }
        },
    },
};
</script>

<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .content {
        width: 100%;
        height: 100%;
        padding: 20px;
        border-radius: 10px;
        background-color: #fff;
        .search {
            width: 100%;
            margin: 0 auto;
            // padding-top: 20px;
            display: flex;
            flex-wrap: wrap;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 20px;
                margin-bottom: 20px;
                span {
                    display: inline-block;
                    margin-right: 10px;
                }
            }
        }
        .table{
            margin-top: 10px;
        }
        .clearfix{
            margin-top: 10px;
            padding-bottom: 0;
            display: flex;
            justify-content: center;
        }
    }
}
.addClassModal{
    .item{
        width: 96%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: auto;
        margin-bottom: 20px;
        span{
            width: 120px;
        }
        .tip{
            width: 10px;
        }
        .inputbox{
            flex: 1;
            /deep/.el-upload {
                    width: 100%;
                    height: 150px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                }
                /deep/.el-upload-dragger {
                    width: 100%;
                    height: 150px;
                }
                /deep/ .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 178px;
                    height: 178px;
                    line-height: 178px;
                    text-align: center;
                }
                /deep/.avatar {
                    width: 100%;
                    // height: 150px;
                    display: block;
                }
                /deep/.el-upload__text {
                    line-height: 150px;
                }
                img{
                    display: block;
                    width: 100%;
                    // height: 100%;
                }
        }
    }
}
/deep/.el-tag.el-tag--info{
    background-color:rgba(255, 72, 72, 0.1);
    border-radius:2px;
    border-color:#FF4848;
    color:#FF4848;
}
/deep/.el-tag.el-tag--success{
    background-color: rgba(63, 207, 119, 0.1);
    border-color:#28D79C;
    color: #3FCF77;
    border-radius:2px;
}
</style>
